<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>

<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>指派查询</title>
    <link rel="icon" href="https://static.jianshukeji.com/highcharts/images/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=0.3, user-scalable=0, minimum-scale=0, maximum-scale=5.0,user-scalable=yes">
    <link rel="stylesheet" href="/css/officialDocument/officialDocument.css">
    <style>
        #ulactive .active{
            background:#2F8AE3 ;
            color: #fff;
        }
        #ulactive{
            position: fixed;
            top:16px;
            right:50px;
            z-index: 9999;
            border-radius: 6px;
        }
        #ulactive li{
            cursor: pointer;
        }
    </style>
    <script src="/lib/jQuery-File-Upload-master/jquery-1.8.3.min.js"></script>
    <script src="/js/base/base.js"></script>
    <script src="/lib/Highcharts-5.0.14/code/highcharts.js"></script>
    <script src="/lib/Highcharts-5.0.14/code/modules/data.js"></script>
    <script src="/lib/Highcharts-5.0.14/code/modules/drilldown.js"></script>

    <%--    <script src="/lib/Highcharts-5.0.14/code/highcharts-zh_CN.js"></script>--%>
</head>

<body>


<ul class="clearfix" id="ulactive" style="border: 1px solid #2F8AE3;">
    <li class="fl active" data-type="day" style="padding: 10px 20px;border-right: 1px solid #2F8AE3;">日</li>
    <li class="fl" data-type="week" style="padding: 10px 20px;border-right: 1px solid #2F8AE3;">周</li>
    <li class="fl" data-type="month" style="padding: 10px 20px;border-right: 1px solid #2F8AE3;">月</li>
    <li class="fl" data-type="year" style="padding: 10px 20px;border-right: 1px solid #2F8AE3;">年</li>
</ul>

<!--
*************************************************************************
   Generated by HCODE at 2017-09-11 14:38:27
   From: https://code.hcharts.cn/demos/hhhhDs
*************************************************************************
 -->
<div id="container" style="min-width: 510px;margin: 0 auto;background: #fff"></div>
<script>
    $('#container').height($(window).height()-44)
    var urllocation=$.GetRequest().type;


    function typeajax(type,fn) {
        $.ajax({
            type : 'get',
            url : '/gridEventParting/getStatistics',
            dataType : 'json',
            data : {
                timeType:type,
                queryType:urllocation
            },
            success : function(json) {
                var rsp=json.datas;
                var arrs=[];
                var arrsTwo=[];
                for(var i=0;i<rsp.length;i++){
                    var obj={};
                    obj.name=rsp[i].name;
                    obj.id=rsp[i].name;
                    obj.data=[];
                    var objTwo={};
                    objTwo.name=rsp[i].name;
                    objTwo.drilldown=rsp[i].name;
                    objTwo.y=rsp[i].y;
                    arrsTwo.push(objTwo)
                    for(var m=0;m<rsp[i].data.length;m++){
                        var arrData=[];
                        arrData.push(rsp[i].data[m].name)
                        arrData.push(rsp[i].data[m].y)
                        obj.data.push(arrData);
                    }
                    arrs.push(obj)

                }
                console.log(arrs)
                // Create the chart
                fn(arrsTwo,arrs)
            }
        });
    }


    $(function () {






        $('#ulactive li').click(function () {
            $(this).siblings('li').removeClass('active');
            $(this).addClass('active')
            typeajax($(this).attr('data-type'),function (arrs,arrsTwo) {
                Highcharts.chart('container', {
                    chart: {
                        type: 'column'
                    },
                    title: {
                        text: '指派次数'
                    },
                    subtitle: {
                        text: '点击可查看详细信息'
                    },
                    xAxis: {
                        type: 'category'
                    },
                    yAxis: {
                        title: {
                            text: '指派次数'
                        }
                    },
                    legend: {
                        enabled: false
                    },
                    plotOptions: {
                        series: {
                            borderWidth: 0,
                            dataLabels: {
                                enabled: true,
                                format: '{point.y}'
                            }
                        }
                    },
                    tooltip: {
                        headerFormat:
                            '<span style="font-size:11px">{series.name}</span><br>',
                        pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y}</b><br/>'
                    },
                    series: [{
                        name: '指派次数',
                        colorByPoint: true,
                        data: arrs
                    }],
                    drilldown: {
                        series:arrsTwo
                    }
                });
            })

        })


        $($('#ulactive li')[0]).click()

    });
</script>
</body>
</html>